<!-- card-four.vue -->
<template>
  <a-spin style="width: 100%; margin-top: 10px">
    <a-card :bordered="false" style="height: 130px">
      <div>
        <a-statistic
            title="当日发电量"
            :value="renderData.singleValue"
            animation :precision="2">
          <template #suffix>{{ 'KWh' }}</template>
        </a-statistic>
      </div>

      <a-statistic
          :value="Math.abs(renderData.chainRatio)"
          animation :precision="2"
          :value-style="{ color: '#f00' }">
        <template #prefix>较昨日</template>
        <template #suffix>
          %
          <template v-if="renderData.chainRatio > 0">
            <icon-arrow-rise />
          </template>
          <template v-else-if="renderData.chainRatio < 0">
            <icon-arrow-down />
          </template>
        </template>
      </a-statistic>
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getTodayPower } from '../../../apis/home-pv'

// 页面数据
const renderData = ref<any>({
  singleValue: '',
  chainRatio: ''
})

// 获取数据
const getData = async () => {
  const res = await getTodayPower()
  if (res.data.code == 200) {
    renderData.value.singleValue = res.data.data.singleInfo.singleValue
    renderData.value.chainRatio = res.data.data.singleInfo.chainRatio
  }
}

onMounted(async () => {
  await getData()
})
</script>